<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-row :gutter="20">
        <el-col :span="12">
          <iframe width="100%" height="500" :src="`https://www.sogou.com/web?query=${phone}`"> </iframe>
        </el-col>
        <el-col :span="12">
          <iframe width="100%" height="500" :src="`https://www.so.com/s?q=${phone}`"> </iframe>
        </el-col>
      </el-row>
      <div class="panel-line">
        <el-button @click="handleCancel">关闭</el-button>
        <el-button type="danger" @click="handleBlack" v-if="id && phone && source === 6" :loading="loading">加入黑名单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { apiAssetAddBlack } from '@/api/assetsPublic'

export default {
  name: 'DialogDelete',
  props: {
    id: String,
    source: Number,
    phone: String,
  },
  data() {
    return {
      loading: false,
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 取消
    handleCancel() {
      this.$emit('close')
    },
    // 加入黑名单
    handleBlack() {
      window.enterPreventDefault = false
      this.$confirm(`确认将 ${this.phone} 加入黑名单？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          this.loading = true
          apiAssetAddBlack({
            post_id: this.id,
            phone: this.phone,
          })
            .then((res) => {
              this.loading = false
              this.$message({
                message: '操作成功',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('close')
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
  },
}
</script>

<style scoped lang="scss">
iframe {
  border: none;
}
.panel-line {
  margin-top: 30px;
  justify-content: center;
}
</style>
